<template>
  <!-- 视频列表 -->
  <div class="VideoList" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
    <div class="container" v-for="(item, index) in videos" :key="index">
      <div class="image" @click="itemClick(item.data.vid || item.data.id)">
        <img v-lazy="item.data.coverUrl" alt="" />
        <div class="playcount">
          <i class="iconfont icon-bofang"></i>
          <span>{{ item.data.playTime || item.data.playCount | countFormat }}</span>
        </div>
        <div class="time">{{ item.data.duration / 1000 || (item.data.durationms / 1000) | timeFormat }}</div>
        <div class="btn"><i class="iconfont icon-bofang"></i></div>
      </div>
      <p class="name">{{ item.data.title || item.data.name }}</p>
      <p class="creator" v-if="item.data.creator">by {{ item.data.creator.nickname }}</p>
      <p class="creator" v-else-if="item.data.artists">by {{ item.data.artists[0].name }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: ['videos'],
  data() {
    return {
      loading: false,
    };
  },
  computed: {
    disabled() {
      return this.loading;
    },
  },
  created() {},
  components: {},
  methods: {
    //点击实现视频播放跳转
    itemClick(vid) {
      this.$router.push('/videodetail/' + vid).catch((error) => {});
    },
    load() {
      this.loading = true;
      setTimeout(() => {
        this.$emit('loadMore', this.videos.length);
        this.loading = false;
      }, 300);
    },
  },
  activated() {
    this.loading = false;
  },
  deactivated() {
    //组件失活移除滚动事件
    this.loading = true;
  },
};
</script>

<style scoped lang='scss'>
.VideoList {
  display: grid;
  grid-template-columns: repeat(3, 250px);
  grid-gap: 22px;
  // justify-content: space-between;
  // flex-wrap: wrap;
  .container {
    width: 250px;
    font-size: 12px;
    .image {
      position: relative;
      img {
        width: 100%;
        height: 140px;
        border-radius: 5px;
        cursor: pointer;
        vertical-align: middle;
      }
      .playcount {
        @include playCount;
        i {
          font-size: 12px;
        }
      }
      .time {
        position: absolute;
        right: 5px;
        bottom: 5px;
        color: #fff;
      }
      .btn {
        @include playLogo(40%);
        i {
          font-size: 17px;
          color: $themeColor;
        }
      }
      &:hover .btn {
        opacity: 1;
      }
    }
    .name {
      @include hidWord;
    }
    .creator {
      color: #919191;
    }
  }
}
</style>